<template>
	<view>
		<view v-if="show"  @touchstart.prevent="close()" class="flex flex-y-end"
			style="position: fixed;bottom: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0);left:0;z-index: 100;">
			<view :style="{marginBottom:getHeight()+'px'}" @touchstart.prevent="clear" @tap.stop="clear"
				class="flex flex-y-center"
				style="padding: 16rpx 0 16rpx 30rpx;background-color: #FFFFFF;width: 100%;box-shadow: 0px 0px 12rpx 3rpx rgba(178,178,178,0.1);transition: all 0.2s;">
				<textarea :auto-focus="true" :adjust-position="false" @keyboardheightchange="keyboardheightchange"
					v-model="text" :placeholder="config.title" :auto-height="true"
					class="input-textarea color-333333 fs-28"></textarea>
				<view @touchstart.prevent="send" style="padding: 0 30rpx;height: 70rpx;" class="flex flex-x-y">
					<view class="flex flex-x-y bg-all color-ffffff fs-28"
						style="width: 102rpx;height: 60rpx;border-radius: 20rpx;">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qq-bottom-input",
		data() {
			return {
				show: false,
				config_old: {
					title: '请输入',
				},
				config: {
					title: '请输入',
				},
				height: 0,
				text: '',
				input_height: uni.getStorageSync('input-height') || 0,
				focus: false,
			};
		},
		methods: {
			send() {
				if (!String(this.text).trim()) {
					this.showToast('评论不能为空');
					return;
				}
				this.config.success && this.config.success(String(this.text));
				this.text = '';
				this.close();
			},
			getHeight() {
				if (this.height == 0) return 0;
				let safeHeight = getApp().globalData.safeArea || 0;
				let page = getCurrentPages();
				let route = "";
				// #ifdef H5
				return 0;
				// #endif
				if (page.length > 0) {
					let self = page[page.length - 1]
					//#ifdef MP-WEIXIN || APP-PLUS
					self = page[page.length - 1].$vm;
					//#endif
					route = self.route;

					//#ifdef APP-PLUS
					route = page[page.length - 1].route;
					//#endif
					console.log('route', route);
					if (route == 'pages/friend/friend') {
						return this.height - 60 - safeHeight;
					} else {
						return this.height;
					}
				}
				return this.height;

			},
			close() {
				this.show = false;
				this.focus = false;
			},
			open(config) {
				this.config = {
					...this.config_old,
					...config,
				};
				this.show = true;
				setTimeout(() => {
					this.focus = true;
					// uni.showKeyboard();
					if (this.input_height > 0) {
						this.height = this.input_height
					}

				}, 100);
			},
			keyboardheightchange(e) {
				let height = e.detail.height;
				if (height > 0) {
					this.input_height = height;
					this.height = height;
					uni.setStorageSync('input-height', height);
				} else {
					this.height = 0;
					this.show = false;
				}
			},
		},
	}
</script>

<style>
	.input-textarea {
		min-height: 38rpx;
		background-color: #f6f6f6;
		border-radius: 20rpx;
		flex: 1;
		padding: 16rpx 24rpx;
	}
</style>